<template>
  <div class="taobao-helper-tool">
    <div class="taobao-helper-tool-main">
      <div class="taobao-helper-tool-header">
        <div class="taobao-helper-tool-header-msg">
          <div class="taobao-helper-tool-header-msg-left">
            <div class="taobao-helper-tool-header-msg-left-inner">
              <div class="taobao-helper-tool-logo-box">
                <a target="_blank" class="taobao-helper-tool-logo">
                </a>
              </div>
              <div class="taobao-helper-tool-notice">
                <span>这是一长串的通知内容</span>
              </div>
            </div>
          </div>
          <div class="taobao-helper-tool-header-msg-right">
            <div class="taobao-helper-tool-item taobao-helper-tool-header-freeze">冻结</div>
            <div class="taobao-helper-tool-item taobao-helper-tool-header-shouqi">收起</div>
            <div class="taobao-helper-tool-item taobao-helper-tool-header-user">个人中心</div>
            <div class="taobao-helper-tool-item taobao-helper-tool-header-kf">客服</div>
          </div>
        </div>
      </div>
      <div class="taobao-helper-tool-body">
        <div class="taobao-helper-tool-body-nav1">
          <div class="taobao-helper-tool-material-download">
            <div class="taobao-helper-tool-material-logo">素材下载</div>
            <div class="taobao-helper-tool-menu taobao-helper-tool-main-img-action">
              <el-dropdown size="mini" @command="downloadSkuPic">
                <span>主图SKU图<i class="el-icon-arrow-down el-icon--right"></i></span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="pc">PC端</el-dropdown-item>
                  <el-dropdown-item>手淘端</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import $ from "jquery";
import JSZip from 'jszip';
import FileSaver from 'file-saver'; // 用于保存文件
export default {
  data() {
    return {}
  },
  created() {
    console.log('created........')
    const picGallery = $('[class^="PicGallery--thumbnailPic"]');
    console.log('搜寻主图图片', picGallery)
  },
  methods: {
    async downloadSkuPic(command) {
      this.$message('click on item ' + command);
      if (command != undefined && command === 'pc') {
        const picGallery = $('[class^="PicGallery--thumbnailPic"]');
        if (picGallery != undefined && picGallery.length > 0) {
          let imgList = []
          for (let i = 0; i < picGallery.length; i++) {
            let item = picGallery[i]
            let src = item.src
            if (src != undefined && src.indexOf('.jpg') != -1) {
              src = src.substring(0, src.indexOf('.jpg') + 4)
              imgList.push(src)
            }

          }
          const zip = new JSZip()
          await Promise.all(
            imgList.map(async (imageUrl, index) => {
              console.log('开始下载图片：', imageUrl)
              const response = await fetch(imageUrl);
              const blob = await response.blob();
              zip.file(`主图/主图${index + 1}.jpg`, blob);
            })
          )
          console.log('下载zip完成...', zip)
          zip.generateAsync({ type: 'blob' }).then((content) => {
            // 使用 FileSaver 将 ZIP 文件保存并触发下载
            FileSaver.saveAs(content, `pc端sku主图${new Date().getTime()}.zip`);
          });
        }
      }

    }
  }
}
</script>

<style scoped>
[class^=taobao-helper] {
  font-family: SF Pro SC, SF Pro Text, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif;
}

.taobao-helper-tool-item {
  height: 28px;
  padding: 0 15px;
}

.taobao-helper-tool {
  width: 100%;

  z-index: 9998;
  margin-top: 20px;
  margin-bottom: 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  /*justify-content: center;*/
}

.taobao-helper-tool-main {
  width: 1190px;
  display: flex;
  flex-direction: column;
  /* align-items: center; */
}

.taobao-helper-tool-header {
  width: 100%;
  background: url(https://xws.tqdn.cn/images/xws_cj_detailBackground.jpg);
  color: #fff;
  font-family: SF Pro Text;
  font-size: 12px;
  line-height: 12px;
  text-align: left;
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
}

.taobao-helper-tool-header-msg {
  display: flex;
  justify-content: space-between;
  height: 28px;
  line-height: 28px;
}

.taobao-helper-tool-header-msg-left-inner {
  display: flex;
}

.taobao-helper-tool-logo {
  display: block;
  height: 24px;
  line-height: 24px;
  width: 230px;
  padding-left: 8px;
  border-top-left-radius: 4px;
  border-top-right-radius: 10px;
  background: #fff8f3;
  text-decoration: none;
  background: url(https://xws.tqdn.cn/images/xws_crx/chajian_logoBackground.png);
  background-size: 100% 100%;
}

.taobao-helper-tool-header-msg-right {
  display: flex;
  align-items: center;
}

.taobao-helper-tool-body {
  display: flex;
  flex-direction: column;
  background: #fff8f3;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
}

.taobao-helper-tool-menu {
  cursor: pointer;
  font-weight: 400;
  line-height: 28px;
}

.taobao-helper-tool-menu:hover {
  background: rgba(255, 106, 77, .1) !important;
  color: #ff2a00 !important;
  transition: all .2s ease 0s;
}

.taobao-helper-tool-body-nav1 {
  display: flex;
  padding: 6px 8px 6px 8px;
}

.taobao-helper-tool-material-download {
  display: flex;
  height: 28px;
}

.taobao-helper-tool-material-logo {
  display: inline-block;
  width: 64px;

  color: #fff;
  font-family: SF Pro Text;
  font-weight: 400;
  line-height: 28px;
  text-align: center;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
  background: linear-gradient(to top left, #ff2a00, #ff6100);
}

.taobao-helper-tool-main-img-action {
  padding: 0 8px 0 8px;
  background-color: #fff;
  color: #000;
  line-height: 28px;

}

/* 通过使用after伪元素的方式实现较矮的border-right */
.taobao-helper-tool-main-img-action::after {
  border-right: 1px solid rgba(0, 0, 0, .1);
  content: "";
  height: 12px;
  display: inline-block;
}
</style>


